<template>
  <view :class="['container', { dark: theme == 'dark' }]">
    <view class="top">
      <view :class="['fixedTop', 'top1', { dark: theme == 'dark' }]">
        <view class="flex userInfo">
          <image
            class="avatar"
            :src="head"
            mode=""
          ></image>
          <view class="namephobe">
            <view class="name">{{ $t('bico.W499') }} {{ info.account }}</view>
            <view class="phone">{{ $t('bico.W623') }} {{ info.uid }}</view>
          </view>
        </view>

        <!-- 在线客服 -->
        <view
          :class="[{ listItemDark: theme == 'dark' }]"
          @click="gocontact"
        >
          <view class="enttm">
            <image
              :src="theme == 'dark' ? '/static/ico/ke2.png' : '/static/ico/ke1.png'"
              class="flex_image2"
            ></image>
          </view>
        </view>

        <!-- 语言切换 -->
        <view
          :class="[{ listItemDark: theme == 'dark' }]"
          @click="funsItemClick(7)"
        >
          <view class="ent">
            <image
              :src="theme == 'dark' ? '/static/ico/she2.png' : '/static/ico/she1.png'"
              class="flex_image2"
            ></image>
          </view>
        </view>

        <!-- 用户中心 -->
        <view>
          <view class="enttmm">
            <view class="funsItemText2">{{ $t('bico.W501') }}</view>
          </view>
        </view>

        <!-- 邀请好友 -->
        <navigator @click="funsItemClick(15)">
          <view class="ente">
            <view class="aui-flex-box-fr">
              <view class="flex itemLeft">
                <image
                  src="../../static/ico/yqhy2.png"
                  class="flex_image"
                ></image>
                <view class="size30">{{ $t('bico.W508') }}</view>
                <text class="iconfont icon-xiangyou1"></text>
              </view>
            </view>
          </view>
        </navigator>

        <view class="funBox">
          <view :class="['flex', 'funs', { darksss: theme == 'dark' }]">
            <view
              class="funsItem"
              @click="funsItemClick(5)"
            >
              <image
                class="funsItemImage"
                src="../../static/ico/zc22.png"
                mode=""
              ></image>
              <view class="funsItemText">{{ $t('bico.W502') }}</view>
            </view>

            <view
              class="funsItem"
              @click="funsItemClick(1)"
            >
              <image
                class="funsItemImage"
                src="../../static/ico/gg22.png"
                mode=""
              ></image>
              <view class="funsItemText">{{ $t('bico.W503') }}</view>
            </view>

            <view
              class="funsItem"
              @click="funsItemClick(3)"
            >
              <image
                class="funsItemImage"
                src="../../static/ico/cb22.png"
                mode=""
              ></image>
              <view class="funsItemText">{{ $t('bico.W504') }}</view>
            </view>
            <view
              class="funsItem"
              @click="funsItemClick(4)"
            >
              <image
                class="funsItemImage"
                src="../../static/ico/tb22.png"
                mode=""
              ></image>
              <view class="funsItemText">{{ $t('bico.W505') }}</view>
            </view>

            <view
              class="funsItem"
              @click="funsItemClick(2)"
            >
              <image
                class="funsItemImage"
                src="../../static/ico/aq22.png"
                mode=""
              ></image>
              <view class="funsItemText">{{ $t('bico.W506') }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="top3">
        <!-- 昼夜模式切换 -->

        <view :class="['list', 'funs', { darksss: theme == 'dark' }]">
          <view :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]">
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/hy.png' : '/static/ico/bt.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W507') }}</view>
            </view>

            <!-- <u-switch
              space="2" activeColor="#3f4d6b"
              v-model="value3"
              @change="switchChange"
              size="35"
              inactiveColor="#8fa3ff">
            </u-switch> -->
            <switch
              checked="true"
              @change="switchChange"
              activeColor="#3f4d6b"
              :checked="theme == 'dark' ? true : false"
            />
          </view>

          <!-- 身份认证 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(6)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/rz1.png' : '/static/ico/rz0.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W509') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 我的团队 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(16)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/td2.png' : '/static/ico/td1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W510') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 申请上币 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(18)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/s2.png' : '/static/ico/s1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W511') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 法币商家 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(17)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/sj2.png' : '/static/ico/sj1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W512') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 邀请好友 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(15)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/fx2.png' : '/static/ico/fx1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W513') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 帮助中心 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(12)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/bz2.png' : '/static/ico/bz1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W514') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 服务条款 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(13)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/tk2.png' : '/static/ico/tk1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W515') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 隐私政策 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(11)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/ys2.png' : '/static/ico/ys1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W516') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 官方社区 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(9)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/gf2.png' : '/static/ico/gf1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W517') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 语言选择 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(7)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/yy2.png' : '/static/ico/yy1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W518') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 应用版本 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(14)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/yyy2.png' : '/static/ico/yyy1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W519') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 白皮书 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="funsItemClick(10)"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/bps2.png' : '/static/ico/bps1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W520') }}</view>
            </view>
            <image
              src="../../static/member/right_icon.png"
              class="flex_image3"
            ></image>
          </view>

          <!-- 退出 -->
          <view
            :class="['flex', 'listItem', { listItemDark: theme == 'dark' }]"
            @click="show = true"
          >
            <view class="flex itemLeft">
              <image
                :src="theme == 'dark' ? '/static/ico/tc2.png' : '/static/ico/tc1.png'"
                class="flex_image"
              ></image>
              <view class="size30">{{ $t('bico.W521') }}</view>
            </view>
          </view>
          <u-modal
            v-model="show"
            :show-title="false"
            :cancel-text="cancelText"
            :confirm-text="confirmText"
            :content="content"
            @confirm="logout"
          ></u-modal>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { domain } from '@/common/domain.js';
import { mapState, mapActions, mapGetters } from 'vuex';
import uniPopup from '@/components/uni-popup2.vue';
import {
  commonNewsList,
  commonCarousel,
  huobiTicket,
  info,
  logout,
  commonContact
} from '../../common/apiString.js';
export default {
  components: {
    uniPopup
  },
  data() {
    return {
      confirmText: this.$t('login.c1'),
      cancelText: this.$t('login.c2'),
      mycontact: '',
      content: this.$t('bico.W522'),
      value3: false,
      show: false,
      isFinger: '0',
      token: '',
      info: '',
      fingerBool: 0,
      faceBool: 0,
      head: '../../static/rvm.png'
    };
  },
  filters: {
    toFixed2: function (value, options) {
      value = Number(value);
      return value.toFixed(2);
    }
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onPullDownRefresh() {
    this.getUserInfo();
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('bico.W524')
    });
    if (uni.getStorageSync('token') && !uni.getStorageSync('isFinger')) {
      this.isFinger = uni.getStorageSync('fingerBool');
      if (this.isFinger) {
        uni.hideTabBar();
      }
    }
  },
  onShow() {
    console.log(uni.getStorageSync('fingerBool'));
    this.fingerBool = uni.getStorageSync('fingerBool');
    this.changeFooter();
    this.getUserInfo();
    this.value3 = this.theme == 'dark' ? true : false;
    this.token = uni.getStorageSync('token');
    this.$utils.setTheme(this.theme);
    this.contact();
  },
  methods: {
    contact() {
      this.$utils.initData(
        {
          url: commonContact,
          type: 'post'
        },
        (res, msg) => {
          //uni.stopPullDownRefresh();
          this.mycontact = res;
        }
      );
    },

    //路由开始

    funsItemClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url: '/pages/neWs/neWs' //公告
        });
      }
      if (index == 2) {
        uni.navigateTo({
          url: '/pages/mine/security' //安全中心
        });
      }
      if (index == 3) {
        uni.navigateTo({
          url: '/pages/assets/charge' //冲币
        });
      }
      if (index == 4) {
        uni.navigateTo({
          url: '/pages/assets/mention' //提币
        });
      }

      if (index == 5) {
        uni.navigateTo({
          url: '/pages/assets/assets' //我的资产
        });
      }

      if (index == 6) {
        uni.navigateTo({
          url: '/pages/mine/userCenter' //身份认证
        });
      }

      if (index == 7) {
        uni.navigateTo({
          url: '/pages/mine/lang' //语言选择
        });
      }

      if (index == 8) {
        uni.navigateTo({
          url: '/pages/mine/lang' //在线客服
        });
      }

      if (index == 9) {
        uni.navigateTo({
          url: '/pages/telegram/telegram' //官方社区
        });
      }

      if (index == 17) {
        uni.navigateTo({
          url: '/pages/business/business' //法币商家
        });
      }
      if (index == 16) {
        uni.navigateTo({
          url: '/pages/member/member' //我的团队
        });
      }
      if (index == 15) {
        uni.navigateTo({
          url: '/pages/share/share' //邀请好友
        });
      }
      if (index == 14) {
        uni.navigateTo({
          url: '/pages/version/version' //应用版本
        });
      }
      if (index == 13) {
        uni.navigateTo({
          url: '/pages/mairivacy/mairivacy' //服务条款
        });
      }
      if (index == 12) {
        uni.navigateTo({
          url: '/pages/contact/contact' //帮助中心
        });
      }
      if (index == 11) {
        uni.navigateTo({
          url: '/pages/privacy/privacy' //隐私政策
        });
      }
      if (index == 10) {
        uni.navigateTo({
          url: '/pages/Whiteskin/Whiteskin' //白皮书
        });
      }
      if (index == 18) {
        uni.navigateTo({
          url: '/pages/Apply/Apply' //申请上币
        });
      }
    },

    //路由结束

    fingerFuc() {
      var that = this;
      if ('Android' == plus.os.name) {
        this.type = 'fingerAlert'; //兼容Android平台
      }
      if (plus.fingerprint.isSupport()) {
        if (!plus.fingerprint.isEnrolledFingerprints()) {
          plus.nativeUI.toast('当前设备未录入指纹！');
        }
        plus.fingerprint.authenticate(
          function (e) {
            if ('Android' == plus.os.name) {
              that.type = ''; //兼容Android平台
            }
            uni.setStorageSync('isFinger', true);
            that.isFinger = 0;
            uni.showTabBar();
          },
          function (e) {
            plus.nativeUI.toast('指纹匹配失败');
            if ('Android' == plus.os.name) {
              that.type = ''; //兼容Android平台
              plus.fingerprint.cancel();
            }
          },
          {
            message: '授权登录'
          }
        );
      } else {
        plus.nativeUI.toast('此设备不支持指纹设置！');
      }
    },
    fingerCancel() {
      this.type = '';
      plus.fingerprint.cancel();
    },
    changeFooter() {
      uni.setTabBarItem({
        index: 0,
        text: this.$t('tabBar.index')
      });
      uni.setTabBarItem({
        index: 1,
        text: this.$t('tabBar.business')
      });
      uni.setTabBarItem({
        index: 2,
        text: this.$t('tabBar.perpetual')
      });
      uni.setTabBarItem({
        index: 3,
        text: this.$t('tabBar.agreements')
      });
      uni.setTabBarItem({
        index: 4,
        text: this.$t('tabBar.mine')
      });
    },
    // 开启面部识别
    switchChangeFace() {
      var that = this;
      console.log(that.faceBool);
      if (that.faceBool == 0) {
        that.faceBool = 1;
      } else {
        that.faceBool = 0;
      }
    },
    // 开启指纹识别
    switchChangeFinger() {
      var that = this;
      console.log(that.fingerBool);
      if (that.fingerBool == 0) {
        that.fingerBool = 1;
      } else {
        that.fingerBool = 0;
      }
      if (plus.fingerprint.isSupport()) {
        if (!plus.fingerprint.isEnrolledFingerprints()) {
          plus.nativeUI.toast('当前设备未录入指纹！');
          if (that.fingerBool == 0) {
            that.fingerBool = 1;
          } else {
            that.fingerBool = 0;
          }
        }
        if ('Android' == plus.os.name) {
          plus.nativeUI.showWaiting('指纹匹配中...');
        }
        plus.fingerprint.authenticate(
          function (e) {
            if ('Android' == plus.os.name) {
              plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
            }
            plus.nativeUI.toast('指纹匹配成功');
            console.log(that.fingerBool);
            uni.setStorageSync('fingerBool', that.fingerBool);
          },
          function (e) {
            if ('Android' == plus.os.name) {
              plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
              plus.fingerprint.cancel();
            }
            plus.nativeUI.toast('指纹匹配失败');
            console.log(that.fingerBool);
            if (that.fingerBool == 0) {
              that.fingerBool = 1;
            } else {
              that.fingerBool = 0;
            }
          },
          {
            message: '指纹授权登录'
          }
        );
      } else {
        plus.nativeUI.toast('此设备不支持指纹设置！');
        if (that.fingerBool == 0) {
          that.fingerBool = 1;
        } else {
          that.fingerBool = 0;
        }
      }
      // this.fingerBool = e.target.value
      // uni.setStorageSync('fingerBool',e.target.value)
    },
    // 切换夜间模式
    switchChange() {
      var ui = this.theme == 'light' ? 'dark' : 'light';
      uni.setStorageSync('theme', ui);

      this.$store.dispatch('changeTheme', ui);
      this.$utils.setTheme(ui);
      if (ui == 'dark') {
        this.value3 = true;
        uni.setTabBarStyle({
          color: '#a2a6a5',
          selectedColor: '#1881d2',
          backgroundColor: '#0f1a2d',
          borderStyle: 'black'
        });
      } else {
        this.value3 = false;
        uni.setTabBarStyle({
          color: '#8b97a0',
          selectedColor: '#238ee1',
          backgroundColor: '#ffffff',
          borderStyle: 'white'
        });
      }
    },
    uploadImg() {
      var that = this;
      uni.chooseImage({
        count: 1,
        // sizeType: ['original', 'compressed'],
        sizeType: ['compressed'],
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: '/api/upload', //仅为示例，非真实的接口地址
            // #ifdef APP-PLUS
            url: domain + '/api/upload',
            // #endif
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              user: 'test'
            },
            success: uploadFileRes => {
              console.log(typeof uploadFileRes.data);
              var data = JSON.parse(uploadFileRes.data);
              if (data.type == 'ok') {
                let head = data.message;
                console.log(head);
                that.uphead(head);
              }
            }
          });
        }
      });
    },
    uphead(head) {
      let that = this;
      this.$utils.initDataToken(
        { url: 'user/head_pic', data: { head_portrait: head }, type: 'post' },
        (res, msg) => {
          that.head = head;
        }
      );
    },
    //获取用户信息
    getUserInfo() {
      var that = this;
      this.$utils.initDataToken({ url: info, data: {}, type: 'POST' }, (res, msg) => {
        uni.setStorageSync('uid', msg.id);
        that.info = res;
        if (res.head_portrait) {
          that.head = res.head_portrait;
        }
        try {
          uni.stopPullDownRefresh();
        } catch (e) {}
      });
    },
    gocontact() {
      // #ifdef APP
      //移动端
      plus.runtime.openURL(this.mycontact);
      // #endif
      //#ifdef H5
      //window.location.href = this.mycontact;
      window.open(this.mycontact, '_blank');
      //#endif
    },
    //退出登录
    logout() {
      this.$utils.initDataToken({ url: logout, data: {}, type: 'POST' }, (res, msg) => {
        this.$utils.clearStorageSync();

        setTimeout(() => {
          this.$utils.showLayer(this.$t('bico.W523'));
        }, 100);
        uni.redirectTo({
          url: '/pages/login/login'
        });
      });
    }
  }
};
</script>
<style scoped>
.flex {
  display: flex;
  align-items: center;
  line-height: 1.8;
}
.container {
  min-height: 100%;
}

.top1 {
  padding-top: 80px;
  height: 200px;
  background: url(../../static/images/sy_bg.png) no-repeat top;
  background-size: 100%;
  width: 100%;
  border-radius: 0 0 2vw 2vw;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.namephobe {
  color: #fff;
  padding: 0 4vw;
}
.name {
  font-weight: bold;
  font-size: 4vw;
  padding-bottom: 2vw;
}
.phone {
  font-size: 3vw;
}
.funBox {
  padding: 0vw 2vw 0;
  position: relative;
  top: 4vw;
}
.funs {
  padding: 6vw 0;
  text-align: center;
  justify-content: space-around;
  border-radius: 0px;
  border-radius: 2vw 2vw 2vw 2vw;
  background-color: #ffffff;
  box-shadow: 1px 9px 10px -3px #f3f3f7;
}
.funsItemImage {
  width: 6.5vw;
  height: 6.5vw;
  border-radius: 50%;
}
.funsItemText {
  font-weight: 400;
  font-size: 14px;
  position: relative;
  top: 1vw;
}
.top2 {
  margin-top: 100rpx;
  padding: 20rpx 30rpx 30rpx;
}
.size30 {
  font-weight: 400;
  font-size: 14px;
}
.invitation {
  width: 100%;
  height: 145rpx;
  background-color: #000000;
  border-radius: 30rpx;
}
.top3 {
  padding: 20vw 2vw;
  padding-top: 66vw;
}
.list {
  padding: 2vw 2vw;
  border-radius: 2vw;
  box-shadow: 0 0px 2vw #eaecf5;
  box-shadow: 0 0px 2vw #ffffff;
}
.listDark {
  box-shadow: 0 0px 2vw #0b0c15;
}
.listItem {
  padding: 18px 0;
  justify-content: space-between;
}
.listItem:not(:last-child) {
  border-bottom: solid 0.4px #b0b4ca42;
}
.listItemDark:not(:last-child) {
  border-bottom: solid 0.4px #161927;
}
.itemLeft > view {
  margin-left: 2vw;
}
.fixedTop {
  width: 100%;
  position: fixed;
  /* top: 86rpx; */
  top: 0;
  left: 0;
  z-index: 10;
}
.avatar {
  background: #ffffff0a;
  border-radius: 50%;
  width: 16vw;
  height: 16vw;
  overflow: hidden;
  border: 1vw solid #ffffff14;
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.ent {
  position: absolute;
  top: 16vw;
  right: 0;
  left: 88vw;
  color: #ffffff;
}
.enttm {
  position: absolute;
  top: 16vw;
  right: 0;
  left: 74vw;
  color: #ffffff;
}
.enttmm {
  position: absolute;
  top: 16vw;
  right: 0;
  left: 77vw;
  color: #ffffff;
}
.userInfo {
  padding: 0 3vw;
}
.iconfont {
  font-family: 'iconfont' !important;

  margin-left: 4px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ente {
  position: absolute;
  top: 24vw;
  right: 0;
  left: 72vw;
  color: #ffffff;
}
.entee {
  font-size: 4vw;
  color: #ffffff;
  line-height: 1.8;
}
.aui-flex-box-fr {
  background: #9ab1e257;
  height: 7vw;
  line-height: 7vw;
  border-radius: 20vw 0 0 20vw;
  width: 40vw;
}
.aui-flex-box-fr {
  text-align: right;
  color: #ffffff;
  padding-right: 10vw;
  position: relative;
}
.icon-vip {
  position: absolute;
  top: 5px;
  left: 6px;
  padding: 0vw 0 0 0;
  background: url(../../static/images/hg.png) no-repeat;
  background-size: 100%;
}

.flex_image {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  position: relative;
  top: 0vw;
}
.flex_image2 {
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  position: relative;
  top: -5vw;
}
.funsItemImages {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  position: relative;
  top: 0.9vw;
}

.funsItemText2 {
  font-weight: 700;
  font-size: 4vw;
  position: relative;
  top: -4vw;
  left: -71vw;
}

.flex_image3 {
  width: 2vw;
  height: 4vw;
  border-radius: 50%;
  position: relative;
  right: 0;
  left: -1vw;
}

/* .u-switch[data-v-4a8c9de7] {
    width: 10vw;
    height: 5vw;
} */
</style>
